<template>
	<div style="display: flex;flex-direction: column;" class="otherPage partyBuildingLeads">
		<Header :selected="2"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''">

			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="1">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row :gutter="20">
					<el-col :xs="24" :sm="24" :md="14" :lg="14">
						<div class="" style="margin-bottom: 10px;">
							<div class="swiper-container" ref="newsSwiper" id="newsSwiper">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="(slide, index) in newsCarousel" :key="index">
										<div class="slide-content">
											<img :src="slide.imageUrl" alt="Slide" class="swiper-lazy animation"
												style="height: 100%;width: 100%;" />
										</div>
										<!-- 	<div class="title">{{slide.title}}</div> -->
									</div>
								</div>
								<div class="newsPation">
									<div class="swiperagination" ref="newsSwiperPagination" id="newsSwiperPagination">
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="10" :lg="10" class="newArea">
						<div class="news-list">
							<el-row :gutter="6" v-for="(news, index) in newsList" :key="index" class="news-item"
								:class="{ 'hover': hoverIndex === index }" @mouseover="hoverIndex = index"
								@mouseleave="hoverIndex = -1" @click.native="goToDetail(news.id)">
								<el-col :span="5" class="date">
									<div>
										<div class="day">{{ formatDate(news.createTime, 'DD') }}</div>
										<div class="month-year">{{ formatDate(news.createTime, 'yyyy-MM') }}</div>
									</div>
								</el-col>
								<el-col :span="19" class="newcontent">
									<div class="newcontentcontainer">
										<div class="title">{{ news.title }}</div>
										<div class="description">
											<div class="moreInfoBtn" @click="goToDetail(news.id)">
												{{$t("moreDetails")}}
											</div>
										</div>

									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>


				<el-row :gutter="24" type="flex">
					<el-col :span="24" class="newMore">

						<el-button type="danger" @click="gotoNewList()">{{$t("more")}}<i
								class="el-icon-d-arrow-right"></i>
						</el-button>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import {
		partyBuildingLeads
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				baseUrl: this.$request.getImgUrl(),
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: partyBuildingLeads,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//党建引领
						label: this.$t('partyBuildingLeads'),
						to: '/partyBuildingLeads'
					},
					{
						//党建资讯
						label: this.$t('partyBuildingInformation'),
						to: '/partyBuildingInformation'
					}
				],
				newsCarousel: [],
				newsList: [],
				hoverIndex: -1
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.getPartyInfoTopImage();
			//获取banner
			this.initBannerSwiper();
			//获取新闻列表
			this.getPartyInfoPage();
		},
		methods: {
			/**
			 * 获取banner图片
			 */
			getPartyInfoTopImage() {
				let params = {};
				let that = this;
				that.$request.getPartyInfoTopImage(params).then(res => {
					if (res && res.data) {
						that.bg_img = that.baseUrl + res.data.fileUrl;
						console.log(that.bg_img);
					}
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},
			/**
			 * 获取新闻列表
			 */
			getPartyInfoPage() {
				let params = {
					"pageNum": 1, //页码
					"pageSize": 4, //页大小（每页显示条数）
				};
				let that = this;
				that.$request.getPartyInfoPage(params).then(res => {
					if (res && res.data) {
						that.newsList = res.data.records;

						that.newsList.forEach(function(item, index) {
							that.newsCarousel.push({
								imageUrl: that.baseUrl + item.fileUrl,
								title: item.title
							})
						})
					}

				}).catch((error) => {
					console.log(error);
				});
			},
			formatDate(date, format) {
				const dateObj = new Date(date);
				const year = dateObj.getFullYear();
				const month = String(dateObj.getMonth() + 1).padStart(2, '0');
				const day = String(dateObj.getDate()).padStart(2, '0');

				// 根据传入的格式进行处理
				if (format === 'yyyy-MM') {
					return `${year}-${month}`;
				} else if (format === 'DD') {
					return day;
				}
				return date;
			},

			initBannerSwiper() {
				let ss = this.$t('partyBuildingLeads')
				let that = this;
				that.swiper = new Swiper(that.$refs.newsSwiper, {

					direction: 'horizontal',
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 0,
					effect: 'slide',
					lazy: {
						loadPrevNext: true,
					},
					pagination: {
						el: that.$refs.newsSwiperPagination,
					},
					autoplay: {
						delay: 4000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},

				});
				that.swiper.on('slideNextTransitionStart', function() {
					var activeIndex = that.swiper.activeIndex;
					// console.log("开始切换" + activeIndex);
				});
			},
			gotoNewList() {
				this.$router.push({
					name: this.$t("partyBuildingInNewsList")
				});
			},
			//////跳转详情页面
			goToDetail(id) {
				this.$router.push({
					name: this.$t("partyBuildingInNewsDetail"),
					query: {
						id: id,
					}
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/partyBuildingLeads/partyBuildingLeads.css");

	.news-item {
		margin-bottom: 20px;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.partyBuildingLeads .news-item:hover {
		transform: scale(0.95)
	}

	.partyBuildingLeads .moreInfoBtn {
		width: 97px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #EB7F20;
		border-radius: 4px;
		text-align: center;
		color: #EB7F20;
	}

	.partyBuildingLeads .moreInfoBtn:hover {
		background-color: #EB7F20;
		color: #FFF;
	}

	.partyBuildingLeads .newcontent .newcontentcontainer {
		height: 100%;
		background-color: #dddddd;
		padding-top: 2vh;
	}

	.partyBuildingLeads .title {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 530;
		color: #000000;
		font-size: 1.2em;
		padding: 10px;
		height: 5vh;
		line-height: 3.5vh;
	}

	.partyBuildingLeads .newcontent .description {
		padding: 0 10px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 1.1em;
		height: 5vh;
		margin-top: 1vh;
	}
	
	
</style>
